page{
	height: 100%;
	overflow: hidden;
}

.container {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;

	> .head {
		text-align: center;
		padding: 40rpx 0 80rpx 0;

		.city_sel input {
			border: 2rpx solid black;
			width: 200rpx;
		}
	}

	/*================= body =================*/

	> .body {
		text-align: center;

		.center_img image {
			width: 300rpx;
		}
	}


	/*================= selCityPanel =================*/

	.sel_city_panel {
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: row;
		height: 100%;
		background: white;
		z-index: 100;
		width: 100%;

		.shade {
			width: 300%;
			height: 300%;
			left: 0;
			top: 0;
			position: absolute;
			background: rgba(0, 0, 0, 0.43);
			z-index: 200;
		}

		.moveup{
			transform: translateY(-30rpx);
		}


		.content {
			transition: 0.5s;
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			.top {
				height: 200rpx;
				.title {
					font-size: 40rpx;
					font-weight: 500;
				}

				.close_btn {
					position: fixed;
					right: 0;
					top: 0;
					padding: 20rpx;
				}

				.search_input_area {
					transition: 0.1s;
					padding: 30rpx;
					&.focus{
						position: absolute;
						z-index: 300;
						background: white;
						width: 110%;
						height: 80rpx;

						.search_input_field{
							display: flex;
							input{
								width: 500rpx;
							}
							.cancel_btn{
								padding: 20rpx;
							}
						}
					}

					&.h_full {
						height: 100%;
					}

					.search_input_field{
						Input {
							border: 2rpx solid #c4c4c4;
							padding: 20rpx;
							border-radius: 40rpx;
							background: white;
							width: 600rpx;
						}
					}
					.search_suggest{
						height: 1066rpx;
						.search_suggest_item{
							padding: 20rpx;
						}
					}
				}
			}

			scroll-view {
				height: 990rpx;
			}

			.city_group {
				.title {
					background: #cecece;
					font-size: 26rpx;
					padding: 10rpx 20rpx;
				}

				.city_list {
					display: flex;
					flex-wrap: wrap;

					.city_list_item {
						width: 180rpx;
						height: 80rpx;
						border: 1px solid #c1c1c1;
						margin: 10rpx 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}

		/*================= sideBar =================*/

		.side_bar {
			height: 100%;
			font-size: 28rpx;
			padding: 100rpx 20rpx 0;
			background: white;
		}

		.pop {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			padding: 20rpx 80rpx;
			background: #c1c1c1b0;
			text-align: center;
		}
	}
}




